<template>
  <div class="sign">
    <div class="imgbox">
      <img src="../../assets/images/sign.png" alt="">
    </div>
    <input type="text" class="name" placeholder="输入姓名" v-model="nickname">
    <input type="text" class="content" placeholder="输入宣传内容" v-model="content">
    <div class="btnBox">
      <input type="button" value="确定" @click="signBtn">
    </div>
  </div>
</template>

<script>
  import { requestSign, requestMe } from '../../api/api'
  export default {
    name: 'sign',
    data () {
      return {
        content: '大家快来支持我吧！',
        nickname: '',
        sponsorsId: '',
        avatar: '',
        phone: ''
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.loadData()
      })
    },
    methods: {
      loadData: function () {
        let e = this
        e.sponsorsId = e.$route.query.sponsorsId
        requestMe({}).then(function (res) {
          e.nickname = res.nickname
          e.avatar = res.avatar
          e.phone = res.phone
          if (res.phone === null || res.phone === '') {
            e.$router.push('/login?sponsorsId=' + e.$route.query.sponsorsId + '&spreaderId=' + e.$route.query.spreaderId)
          }
        })
      },
      signBtn: function () {
        let e = this
        requestSign({
          slogan: e.content,
          nickname: e.nickname,
          sponsor_id: e.sponsorsId,
          avatar: e.avatar,
          spreader_id: this.$route.query.spreaderId
        }).then(function (res) {
          let detailId = res.data.id
          e.$swal('成功', '报名成功', 'success')
          e.$router.push('/detail?detailId=' + detailId + '&sponsorsId=' + e.$route.query.sponsorsId + '&spreaderId=' + e.$route.query.spreaderId)
        })
      }
    }
  }
</script>

<style scoped lang="less">
  @in:30.5rem;
  @border:#e8e8e8;
  @font:#8e8e8e;
  @orange:#f1ae9b;
  @bdcolor:#ededed;

  .imgbox{
    width:125/2/10rem;
    height: 125/2/10rem;
    margin:30/2/10rem auto;
    img{
      width:125/2/10rem;
      height: 125/2/10rem;
      display: block;
    }
  }
  .name,.content,.btnBox{
    width: @in;
    height: 4rem;
    background: @bdcolor;
    display: block;
    margin:30/2/10rem auto;
    border-radius: 0.25rem;
    overflow: hidden;
    padding:0 0.5rem;
    box-sizing: border-box;
    font-size:1.2rem;
  }
  .content{
    margin:40/2/10rem auto;
  }
  .btnBox{
    background: @orange;
    input{
      width: 100%;
      height: 100%;
      background: none;
      color: #fff;
      font-size:1.2rem;
    }
  }
</style>

